<template>
  <div>
    <el-container>
      <el-main class="universal-main">
        <router-view></router-view>
      </el-main>

      <el-footer class="universal-footer">
        <el-row>
          <el-col :span="5" :offset="3">
            <el-button @click="home" class="iconfont icon-index-copy" style="border: none;
    font-size: 25px;" v-focus></el-button>
          </el-col>
          <el-col :span="5">
            <el-button @click="finance" class="iconfont icon-collection-b" style="border: none;
    font-size: 25px;"></el-button>
          </el-col>
          <el-col :span="5">
            <el-button @click="money" class="iconfont icon-tongji" style="border: none;
    font-size: 25px;"></el-button>
          </el-col>
          <el-col :span="5">
            <el-button @click="personal" class="iconfont icon-geren" style="border: none;
    font-size: 25px;"></el-button>
          </el-col>
        </el-row>
      </el-footer>
    </el-container>
  </div>
</template>

<script>
export default {
  name: "Universal",
  // 当页面加载时聚焦到有v-focus标签的组件上
  directives: {
    focus: {
      inserted: function (el) {
        el.focus();
      }
    }
  },
  created() {
    this.$router.push("/home");
  },
  methods: {
    finance() {
      this.$router.push("/finance");
    },
    home() {
      this.$router.push("/home");
    },
    money() {
      this.$router.push("/money");
    },
    personal() {
      this.$router.push("/personal");
    }
  }
}
</script>

<style scoped lang="less">
.universal-main {
  height: 735px;
  padding: 0;
}

.universal-footer {
  padding: 0;
  height: 50px;

  .universal-footer-icon {
    border: none;
    font-size: 25px;
  }
}
</style>
